<template>
  <div class="app-container">
    <el-card class="bug-search">
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
        <el-select v-model="queryParams.project" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-form-item prop="id" style="margin-left:10px;margin-bottom:0px;">
          <el-input v-model="queryParams.bugId" placeholder="请输入bugID" style="width: 200px" />
        </el-form-item>
        <el-form-item style="margin-bottom:0px;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="width: 100%;margin-top:30px;">
      <span class="h3_title mb_16">缺陷列表</span>
      <el-row :gutter="10" class="mb8 fl_r" style="float:right;margin-right:20px">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增缺陷</el-button>
        </el-col>
      </el-row>
      <el-table :data="bugList" style="width: 100%;margin-top:30px;" border>
        <el-table-column align="center" label="编号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="bugId">
          <template slot-scope="scope">
            {{ scope.row.bugId }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="commit">
          <template slot-scope="scope">
            {{ scope.row.commit }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="summary">
          <template slot-scope="scope">
            {{ scope.row.summary }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="description">
          <template slot-scope="scope">
            {{ scope.row.description }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="comment">
          <template slot-scope="scope">
            {{ scope.row.comment }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="reported_ts">
          <template slot-scope="scope">
            {{ scope.row.reported_ts }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="status">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="files">
          <template slot-scope="scope">
            {{ scope.row.files }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope)">修改</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'编辑缺陷':'新增缺陷'"
      :before-close="handleClose"
      class="bugDialog"
    >
      <el-form :model="bugContent" label-width="100px" label-position="left">
        <el-form-item label="bugId">
          <el-input v-model="bugContent.bugId" placeholder="请输入bugId" />
        </el-form-item>
        <el-form-item label="commit">
          <el-input v-model="bugContent.commit" placeholder="请输入commit" />
        </el-form-item>
        <el-form-item label="summary">
          <el-input
            v-model="bugContent.summary"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入缺陷摘要"
          />
        </el-form-item>
        <el-form-item label="description">
          <el-input
            v-model="bugContent.description"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入缺陷描述"
          />
        </el-form-item>
        <el-form-item label="comment">
          <el-input
            v-model="bugContent.comment"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入缺陷评论"
          />
        </el-form-item>
        <el-form-item label="reported_ts">
          <el-date-picker
            v-model="bugContent.reported_ts"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="status">
          <el-select v-model="bugContent.status" placeholder="请选择">
            <el-option
              v-for="item in bugStatus"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="files">
          <el-input
            v-model="bugContent.files"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入相关文件"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="handelBugCancel">取消</el-button>
        <el-button type="primary" @click="confirmBug">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils'

export default {
  data() {
    return {
      bugList: [],
      dialogVisible: false,
      dialogType: 'new',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      statusOptions: [{
        value: '选项1',
        label: 'Tomcat'
      }, {
        value: '选项2',
        label: 'SWT'
      }, {
        value: '选项3',
        label: 'JDT'
      }],
      queryParams: {
        project: 'Tomcat',
        bugId: ''
      },
      defaultBugList: [{
        id: '1',
        bugId: '12020',
        commit: '',
        summary: '5',
        description: '6',
        status: '',
        reported_ts: '7',
        comment: '',
        files: ''
      }],
      bugContent: {
        bugId: '',
        summary: '',
        commit: '',
        description: '',
        status: '',
        reported_ts: '',
        comment: '',
        files: ''
      },
      bugStatus: [{
        value: '选项1',
        label: '已修复'
      }, {
        value: '选项2',
        label: '未修复'
      }]
    }
  },
  watch: {
    bugList: {
      deep: true,
      handler(val) {
        this.buglist = val
      }
    }
  },
  mounted() {
    this.getBugList()
  },

  methods: {
    getBugList() {
      const storedBugs = localStorage.getItem('bugList')
      this.bugList = storedBugs ? JSON.parse(storedBugs) : this.defaultBugList
    },
    handleQuery() {
      console.log(1)
    },
    handleAdd() {
      this.dialogType = 'new'
      this.dialogVisible = true
    },

    confirmBug() {
      const isEdit = this.dialogType === 'edit'
      console.log(this.bugContent)

      if (isEdit) {
        const index = this.bugList.findIndex(bug => bug.bugId === this.bugContent.bugId)
        if (index !== -1) {
          this.$set(this.bugList, index, { ...this.bugContent })
        }
      } else {
        this.bugList.push(this.bugContent)
      }
      localStorage.setItem('bugList', JSON.stringify(this.bugList))
      this.dialogVisible = false
      this.resetBug()
    },

    resetBug() {
      this.bugContent = {
        bugId: '',
        commit: '',
        summary: '',
        description: '',
        status: '',
        reported_ts: '',
        comment: '',
        files: ''
      }
    },
    handelBugCancel() {
      this.dialogVisible = false
      this.resetBug()
    },
    handleClose() {
      this.dialogVisible = false
      this.resetBug()
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.bugContent = deepClone(scope.row)
    },
    handleDelete({ $index, row }) {
      this.$confirm('确认删除这条数据', 'warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          this.bugList.splice($index, 1)
          localStorage.setItem('bugList', JSON.stringify(this.bugList))
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch(err => { console.error(err) })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
